<template>
	<view class="container">
		<u-loading-page :loading="loading" bg-color="#eef3f7" loadingText="FastBee.cn"></u-loading-page>
		<view class="card" v-show="!loading">
			<view class="title-wrap">{{title}}</view>
			<view class="form-wrap">
				<view class="version-wrap">
					<view class="title">{{$tt('status.deviceVersion')}}</view>
					<view>
						<u-button size="mini" type="primary" :plain="true" :text="$tt('status.checkVersion')"
							@click="viewVersion()"></u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- 属性列表-->
		<view class="card" v-if="this.attributeList.length !== 0">
			<view class="title-wrap">{{$tt('status.attribute')}}</view>
			<view class="form-wrap">
				<u-form v-for="item in attributeList" :key="item.id" labelPosition="left" labelWidth="120">
					<u-form-item v-if="item.datatype.type=='bool'" :label="item.name">
						<u-switch v-model="item.shadow" @change="mqttPublish(deviceInfo, item)"
							:disabled="(shadowUnEnable || item.isReadonly==1)" inactiveValue="0" activeValue="1"
							activeColor="#3c9cff" inactiveColor="#c4c6c9" size="20"></u-switch>
					</u-form-item>
					<u-form-item v-if="item.datatype.type=='enum'" :label="item.name">
						<view class="enum-button-wrap"
							v-if="item.datatype.showWay && item.datatype.showWay === 'button'">
							<view class="enum-button" v-for="subItem in item.datatype.enumList" :key="subItem.value">
								<u-button size="mini" :disabled="(shadowUnEnable || item.isReadonly === 1)"
									type="primary" :plain="true" :text="subItem.text" :custom-style="{
										        backgroundColor: subItem.value === item.shadow ? '#e8f4ff' : '',
										        color: subItem.value === item.shadow ? '#1890ff' : '#000'
										      }" @click="enumButtonClick(deviceInfo, item, subItem.value)"></u-button>
							</view>
						</view>
						<uni-data-select v-else :class="(shadowUnEnable || item.isReadonly==1) ? 'disabled' : ''"
							:clear="false" v-model="item.shadow" :localdata="item.datatype.enumList"
							@change="dropdownChange(deviceInfo, item, $event)">
						</uni-data-select>
					</u-form-item>
					<u-form-item v-if="item.datatype.type=='string'" :label="item.name">
						<u-input v-model="item.shadow"
							:placeholder="$tt('status.inputString')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
							:disabled="(shadowUnEnable || item.isReadonly==1)">
							<u-button type="primary" :text="$tt('status.send')" size="mini"
								:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
								@click="mqttPublish(deviceInfo, item)"></u-button>
						</u-input>
					</u-form-item>
					<u-form-item v-if="item.datatype.type=='decimal'" :label="item.name">
						<u-input v-model="item.shadow"
							:placeholder="$tt('status.decimals')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
							:disabled="shadowUnEnable || item.isReadonly==1">
							<u-button type="primary" :text="$tt('status.send')" size="mini"
								:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
								@click="mqttPublish(deviceInfo, item)"></u-button>
						</u-input>
					</u-form-item>
					<u-form-item v-if="item.datatype.type=='integer'" :label="item.name">
						<u-input v-model="item.shadow"
							:placeholder="$tt('status.integer')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
							:disabled="shadowUnEnable || item.isReadonly==1">
							<u-button type="primary" :text="$tt('status.send')" size="mini"
								:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
								@click="mqttPublish(deviceInfo, item)"></u-button>
						</u-input>
					</u-form-item>
					<u-form-item v-if="item.datatype.type === 'object'">
						<view class="object-wrap">
							<u--text class="object-title" prefixIcon="attach"
								iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
								:text="item.name"></u--text>
							<view class="object-content">
								<u-form labelPosition="left" labelWidth="80"
									:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
									<view v-for="param in item.datatype.params" :key="param.id">
										<u-form-item v-if="param.datatype.type === 'bool'" :label="param.name">
											<u-switch v-model="param.shadow" @change="mqttPublish(deviceInfo, param)"
												:disabled="(shadowUnEnable || param.isReadonly === 1)" inactiveValue="0"
												activeValue="1" activeColor="#3c9cff" inactiveColor="#c4c6c9" size="20">
											</u-switch>
										</u-form-item>
										<u-form-item v-if="param.datatype.type === 'enum'" :label="param.name">
											<view class="enum-button-wrap"
												v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
												<view class="enum-button" v-for="subItem in param.datatype.enumList"
													:key="subItem.value">
													<u-button size="mini" :custom-style="{
															        backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',
															        color: subItem.value === param.shadow ? '#1890ff' : '#000'
															      }" :disabled="(shadowUnEnable || param.isReadonly === 1)" type="primary" :plain="true"
														:text="subItem.text"
														@click="enumButtonClick(deviceInfo, param, subItem.value)"></u-button>
												</view>
											</view>
											<uni-data-select v-else
												:class="(shadowUnEnable || param.isReadonly === 1) ? 'disabled' : ''"
												:clear="false" v-model="param.shadow"
												:localdata="param.datatype.enumList"
												@change="dropdownChange(deviceInfo, param, $event)">
											</uni-data-select>
										</u-form-item>
										<u-form-item v-if="param.datatype.type === 'string'" :label="param.name">
											<u-input v-model="param.shadow"
												:placeholder="$tt('status.inputString')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
												:disabled="(shadowUnEnable || param.isReadonly === 1)">
												<u-button type="primary" :text="$tt('status.send')" size="mini"
													:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
													@click="mqttPublish(deviceInfo, param)"></u-button>
											</u-input>
										</u-form-item>
										<u-form-item v-if="param.datatype.type === 'decimal'" :label="param.name">
											<u-input v-model="param.shadow"
												:placeholder="$tt('status.decimals')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
												:disabled="shadowUnEnable || param.isReadonly === 1">
												<u-button type="primary" :text="$tt('status.send')" size="mini"
													:slot="(shadowUnEnable || param.isReadonly==1) ? '' : 'suffix'"
													@click="mqttPublish(deviceInfo, param)"></u-button>
											</u-input>
										</u-form-item>
										<u-form-item v-if="param.datatype.type === 'integer'" :label="param.name">
											<u-input v-model="param.shadow"
												:placeholder="$tt('status.integer')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
												:disabled="shadowUnEnable || param.isReadonly === 1">
												<u-button type="primary" :text="$tt('status.send')" size="mini"
													:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
													@click="mqttPublish(deviceInfo, param)"></u-button>
											</u-input>
										</u-form-item>
									</view>
								</u-form>
							</view>
						</view>
					</u-form-item>
					<u-form-item v-if="item.datatype.type === 'array'">
						<view class="object-wrap" v-if="item.datatype.arrayType !== 'object'">
							<u--text class="object-title" prefixIcon="order"
								iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
								:text="item.name"></u--text>
							<view class="object-content">
								<u--form labelPosition="left" labelWidth="80"
									:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
									<view v-for="(model,index) in item.datatype.arrayModel" :key="model.id">
										<u-form-item v-if="item.datatype.arrayType=='string'" :label="model.name">
											<u-input v-model="model.shadow" :placeholder="$tt('status.inputString')"
												:disabled=" (shadowUnEnable || item.isReadonly==1)">
												<u-button type="primary" :text="$tt('status.send')" size="mini"
													:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
													@click="mqttPublish(deviceInfo, model)"></u-button>
											</u-input>
										</u-form-item>
										<u-form-item v-if="item.datatype.arrayType=='decimal'" :label="model.name">
											<u-input v-model="model.shadow" :placeholder="$tt('status.inputString')"
												:disabled=" (shadowUnEnable || item.isReadonly==1)">
												<u-button type="primary" :text="$tt('status.send')" size="mini"
													:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
													@click="mqttPublish(deviceInfo, model)"></u-button>
											</u-input>
										</u-form-item>
										<u-form-item v-if="item.datatype.arrayType=='integer'" :label="model.name">
											<u-input v-model="model.shadow" :placeholder="$tt('status.integer')"
												:disabled="(shadowUnEnable || item.isReadonly==1)">
												<u-button type="primary" :text="$tt('status.send')" size="mini"
													:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
													@click="mqttPublish(deviceInfo, model)"></u-button>
											</u-input>
										</u-form-item>
									</view>
								</u--form>
							</view>
						</view>
						<view class="object-wrap" v-if="item.datatype.arrayType === 'object'">
							<u--text class="object-title" prefixIcon="order"
								iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
								:text="item.name"></u--text>
							<view style="padding: 0px 4.5px;" class="object-content">
								<u-collapse :border="true">
									<u-collapse-item v-for="(arrayParam,index) in item.datatype.arrayParams"
										:key="index" :title="item.name+(index+1)" :name="item.id+(index+1)">
										<u--form labelPosition="left" labelWidth="80"
											:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
											<view v-for="param in arrayParam" :key="param.id">
												<u-form-item v-if="param.datatype.type=='bool'" :label="param.name">
													<u-switch v-model="param.shadow"
														@change="mqttPublish(deviceInfo, param)"
														:disabled="(shadowUnEnable || param.isReadonly==1)"
														inactiveValue="0" activeValue="1" activeColor="#3c9cff"
														inactiveColor="#c4c6c9" size="20">
													</u-switch>
												</u-form-item>
												<u-form-item v-if="param.datatype.type === 'enum'" :label="param.name">
													<view class="enum-button-wrap"
														v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
														<view class="enum-button"
															v-for="subItem in param.datatype.enumList"
															:key="subItem.value">
															<u-button size="mini"
																:disabled="(shadowUnEnable || param.isReadonly === 1)"
																type="primary" :plain="true" :text="subItem.text"
																:custom-style="{
																	        backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',
																	        color: subItem.value === param.shadow ? '#1890ff' : '#000'
																	      }" @click="enumButtonClick(deviceInfo, param, subItem.value)"></u-button>
														</view>
													</view>
													<uni-data-select v-else
														:class="(shadowUnEnable || param.isReadonly==1) ? 'disabled' : ''"
														:clear="false" v-model="param.shadow"
														:localdata="param.datatype.enumList"
														@change="dropdownChange(deviceInfo, param, $event)">
													</uni-data-select>
												</u-form-item>
												<u-form-item v-if="param.datatype.type=='string'" :label="param.name">
													<u-input v-model="param.shadow"
														:placeholder="$tt('status.inputString')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
														:disabled="(shadowUnEnable || param.isReadonly==1)">
														<u-button type="primary" :text="$tt('status.send')" size="mini"
															:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
															@click="mqttPublish(deviceInfo, param)">
														</u-button>
													</u-input>
												</u-form-item>
												<u-form-item v-if="param.datatype.type=='decimal'" :label="param.name">
													<u-input v-model="param.shadow"
														:placeholder="$tt('status.decimals')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
														:disabled="shadowUnEnable || param.isReadonly==1">
														<u-button type="primary" :text="$tt('status.send')" size="mini"
															:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
															@click="mqttPublish(deviceInfo, param)">
														</u-button>
													</u-input>
												</u-form-item>
												<u-form-item v-if="param.datatype.type=='integer'" :label="param.name">
													<u-input v-model="param.shadow"
														:placeholder="$tt('status.integer')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
														:disabled="shadowUnEnable || param.isReadonly==1">
														<u-button type="primary" :text="$tt('status.send')" size="mini"
															:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
															@click="mqttPublish(deviceInfo, param)">
														</u-button>
													</u-input>
												</u-form-item>
											</view>
										</u--form>
									</u-collapse-item>
								</u-collapse>
							</view>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<!-- 操作列表-->
		<view class="card" v-if="this.operateList.length !== 0">
			<view class="title-wrap">{{$tt('status.operation')}}</view>
			<view class="form-wrap">
				<u-form v-for="item in operateList" :key="item.id" labelPosition="left" labelWidth="80">
					<u-form-item v-if="item.datatype.type=='bool'" :label="item.name">
						<u-switch v-model="item.shadow" @change="mqttPublish(deviceInfo, item)"
							:disabled="(shadowUnEnable || item.isReadonly==1)" inactiveValue="0" activeValue="1"
							activeColor="#3c9cff" inactiveColor="#c4c6c9" size="20"></u-switch>
					</u-form-item>
					<u-form-item v-if="item.datatype.type=='enum'" :label="item.name">
						<view class="enum-button-wrap"
							v-if="item.datatype.showWay && item.datatype.showWay === 'button'">
							<view class="enum-button" v-for="subItem in item.datatype.enumList" :key="subItem.value">
								<u-button size="mini" :disabled="(shadowUnEnable || item.isReadonly === 1)"
									type="primary" :plain="true" :text="subItem.text" :custom-style="{
										        backgroundColor: subItem.value === item.shadow ? '#e8f4ff' : '',
										        color: subItem.value === item.shadow ? '#1890ff' : '#000'
										      }" @click="enumButtonClick(deviceInfo, item, subItem.value)"></u-button>
							</view>
						</view>
						<uni-data-select v-else :class="(shadowUnEnable || item.isReadonly==1) ? 'disabled' : ''"
							:clear="false" v-model="item.shadow" :localdata="item.datatype.enumList"
							@change="dropdownChange(deviceInfo, item, $event)">
						</uni-data-select>
					</u-form-item>
					<u-form-item v-if="item.datatype.type=='string'" :label="item.name">
						<u-input v-model="item.shadow"
							:placeholder="$tt('status.inputString')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
							:disabled="(shadowUnEnable || item.isReadonly==1)">
							<u-button type="primary" :text="$tt('status.send')" size="mini"
								:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
								@click="mqttPublish(deviceInfo, item)"></u-button>
						</u-input>
					</u-form-item>
					<u-form-item v-if="item.datatype.type=='decimal'" :label="item.name">
						<u-input v-model="item.shadow"
							:placeholder="$tt('status.decimals')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
							:disabled="shadowUnEnable || item.isReadonly==1">
							<u-button type="primary" :text="$tt('status.send')" size="mini"
								:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
								@click="mqttPublish(deviceInfo, item)"></u-button>
						</u-input>
					</u-form-item>
					<u-form-item v-if="item.datatype.type=='integer'" :label="item.name">
						<u-input v-model="item.shadow"
							:placeholder="$tt('status.integer')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
							:disabled="shadowUnEnable || item.isReadonly==1">
							<u-button type="primary" :text="$tt('status.send')" size="mini"
								:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
								@click="mqttPublish(deviceInfo, item)"></u-button>
						</u-input>
					</u-form-item>
					<u-form-item v-if="item.datatype.type === 'object'">
						<view class="object-wrap">
							<u--text class="object-title" prefixIcon="attach"
								iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
								:text="item.name"></u--text>
							<view class="object-content">
								<u-form labelPosition="left" labelWidth="80"
									:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
									<view v-for="param in item.datatype.params" :key="param.id">
										<u-form-item v-if="param.datatype.type === 'bool'" :label="param.name">
											<u-switch v-model="param.shadow" @change="mqttPublish(deviceInfo, param)"
												:disabled="(shadowUnEnable || param.isReadonly === 1)" inactiveValue="0"
												activeValue="1" activeColor="#3c9cff" inactiveColor="#c4c6c9" size="20">
											</u-switch>
										</u-form-item>
										<u-form-item v-if="param.datatype.type === 'enum'" :label="param.name">
											<view class="enum-button-wrap"
												v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
												<view class="enum-button" v-for="subItem in param.datatype.enumList"
													:key="subItem.value">
													<u-button size="mini"
														:disabled="(shadowUnEnable || param.isReadonly === 1)"
														type="primary" :plain="true" :text="subItem.text" :custom-style="{
															        backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',
															        color: subItem.value === param.shadow ? '#1890ff' : '#000'
															      }" @click="enumButtonClick(deviceInfo, param, subItem.value)"></u-button>
												</view>
											</view>
											<uni-data-select v-else
												:class="(shadowUnEnable || param.isReadonly === 1) ? 'disabled' : ''"
												:clear="false" v-model="param.shadow"
												:localdata="param.datatype.enumList"
												@change="dropdownChange(deviceInfo, param, $event)">
											</uni-data-select>
										</u-form-item>
										<u-form-item v-if="param.datatype.type === 'string'" :label="param.name">
											<u-input v-model="param.shadow"
												:placeholder="$tt('status.inputString')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
												:disabled="(shadowUnEnable || param.isReadonly === 1)">
												<u-button type="primary" :text="$tt('status.send')" size="mini"
													:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
													@click="mqttPublish(deviceInfo, param)"></u-button>
											</u-input>
										</u-form-item>
										<u-form-item v-if="param.datatype.type === 'decimal'" :label="param.name">
											<u-input v-model="param.shadow"
												:placeholder="$tt('status.decimals')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
												:disabled="shadowUnEnable || param.isReadonly === 1">
												<u-button type="primary" :text="$tt('status.send')" size="mini"
													:slot="(shadowUnEnable || param.isReadonly==1) ? '' : 'suffix'"
													@click="mqttPublish(deviceInfo, param)"></u-button>
											</u-input>
										</u-form-item>
										<u-form-item v-if="param.datatype.type === 'integer'" :label="param.name">
											<u-input v-model="param.shadow"
												:placeholder="$tt('status.integer')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
												:disabled="shadowUnEnable || param.isReadonly === 1">
												<u-button type="primary" :text="$tt('status.send')" size="mini"
													:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
													@click="mqttPublish(deviceInfo, param)"></u-button>
											</u-input>
										</u-form-item>
									</view>
								</u-form>
							</view>
						</view>
					</u-form-item>
					<u-form-item v-if="item.datatype.type === 'array'">
						<view class="object-wrap" v-if="item.datatype.arrayType !== 'object'">
							<u--text class="object-title" prefixIcon="order"
								iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
								:text="item.name"></u--text>
							<view class="object-content">
								<u--form labelPosition="left" labelWidth="80"
									:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
									<view v-for="(model,index) in item.datatype.arrayModel" :key="model.id">
										<u-form-item v-if="item.datatype.arrayType=='string'" :label="model.name">
											<u-input v-model="model.shadow" :placeholder="$tt('status.inputString')"
												:disabled="(shadowUnEnable
													|| item.isReadonly==1)">
												<u-button type="primary" :text="$tt('status.send')" size="mini"
													:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
													@click="mqttPublish(deviceInfo, model)"></u-button>
											</u-input>
										</u-form-item>
										<u-form-item v-if="item.datatype.arrayType=='decimal'" :label="model.name">
											<u-input v-model="model.shadow" :placeholder="$tt('status.inputString')"
												:disabled=" (shadowUnEnable || item.isReadonly==1)">
												<u-button type="primary" :text="$tt('status.send')" size="mini"
													:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
													@click="mqttPublish(deviceInfo, model)"></u-button>
											</u-input>
										</u-form-item>
										<u-form-item v-if="item.datatype.arrayType=='integer'" :label="model.name">
											<u-input v-model="model.shadow" :placeholder="$tt('status.integer')"
												:disabled="(shadowUnEnable || item.isReadonly==1)">
												<u-button type="primary" :text="$tt('status.send')" size="mini"
													:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
													@click="mqttPublish(deviceInfo, model)"></u-button>
											</u-input>
										</u-form-item>
									</view>
								</u--form>
							</view>
						</view>
						<view class="object-wrap" v-if="item.datatype.arrayType === 'object'">
							<u--text class="object-title" prefixIcon="order"
								iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
								:text="item.name"></u--text>
							<view style="padding: 0px 4.5px;" class="object-content">
								<u-collapse :border="true">
									<u-collapse-item v-for="(arrayParam,index) in item.datatype.arrayParams"
										:key="index" :title="item.name+(index+1)" :name="item.id+(index+1)">
										<u--form labelPosition="left" labelWidth="80"
											:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
											<view v-for="param in arrayParam" :key="param.id">
												<u-form-item v-if="param.datatype.type=='bool'" :label="param.name">
													<u-switch v-model="param.shadow"
														@change="mqttPublish(deviceInfo, param)"
														:disabled="(shadowUnEnable || param.isReadonly==1)"
														inactiveValue="0" activeValue="1" activeColor="#3c9cff"
														inactiveColor="#c4c6c9" size="20">
													</u-switch>
												</u-form-item>
												<u-form-item v-if="param.datatype.type === 'enum'" :label="param.name">
													<view class="enum-button-wrap"
														v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
														<view class="enum-button"
															v-for="subItem in param.datatype.enumList"
															:key="subItem.value">
															<u-button size="mini"
																:disabled="(shadowUnEnable || param.isReadonly === 1)"
																type="primary" :plain="true" :text="subItem.text"
																:custom-style="{
																	        backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',
																	        color: subItem.value === param.shadow ? '#1890ff' : '#000'
																	      }" @click="enumButtonClick(deviceInfo, param, subItem.value)">
															</u-button>
														</view>
													</view>
													<uni-data-select v-else
														:class="(shadowUnEnable || param.isReadonly==1) ? 'disabled' : ''"
														:clear="false" v-model="param.shadow"
														:localdata="param.datatype.enumList"
														@change="dropdownChange(deviceInfo, param, $event)">
													</uni-data-select>
												</u-form-item>
												<u-form-item v-if="param.datatype.type=='string'" :label="param.name">
													<u-input v-model="param.shadow"
														:placeholder="$tt('status.inputString')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
														:disabled="(shadowUnEnable || param.isReadonly==1)">
														<u-button type="primary" :text="$tt('status.send')" size="mini"
															:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
															@click="mqttPublish(deviceInfo, param)">
														</u-button>
													</u-input>
												</u-form-item>
												<u-form-item v-if="param.datatype.type=='decimal'" :label="param.name">
													<u-input v-model="param.shadow"
														:placeholder="$tt('status.decimals')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
														:disabled="shadowUnEnable || param.isReadonly==1">
														<u-button type="primary" :text="$tt('status.send')" size="mini"
															:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
															@click="mqttPublish(deviceInfo, param)">
														</u-button>
													</u-input>
												</u-form-item>
												<u-form-item v-if="param.datatype.type=='integer'" :label="param.name">
													<u-input v-model="param.shadow"
														:placeholder="$tt('status.integer')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
														:disabled="shadowUnEnable || param.isReadonly==1">
														<u-button type="primary" :text="$tt('status.send')" size="mini"
															:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
															@click="mqttPublish(deviceInfo, param)">
														</u-button>
													</u-input>
												</u-form-item>
											</view>
										</u--form>
									</u-collapse-item>
								</u-collapse>
							</view>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="card" :style="loading ? 'visibility:hidden' : 'visibility:visible'"
			v-if="monitorChart.length != 0">
			<view class="title-wrap">{{$tt('status.monitior')}}</view>
			<view class="wrapper">
				<view class="item" v-for="(chart, index) in monitorChart" :key="index">
					<view class="dashboard">
						<qiun-data-charts type="gauge" :opts="chart.opts" :chartData="chart.data" :canvas2d="true"
							:pixelRatio="100" />
					</view>
				</view>
			</view>
		</view>

		<view class="card" v-if="!loading && deviceInfo.isShadow == 1 && deviceInfo.status != 3">
			<view class="title-wrap">{{$tt('status.offline')}}</view>
			<view class="form-wrap">
				<u--form labelPosition="left" labelWidth="80"
					:labelStyle="{ marginRight: '16px', width: '50px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }">
					<view v-for="item in deviceInfo.thingsModels" :key="item.id">
						<u-form-item v-if="item.datatype.type=='bool'" :label="item.name">
							<u-switch v-model="item.value" @change="mqttPublish(deviceInfo, item)" inactiveValue="0"
								activeValue="1" activeColor="#3c9cff" inactiveColor="#c4c6c9" size="20"
								disabled></u-switch>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='enum'" :label="item.name">
							<view class="enum-button-wrap"
								v-if="item.datatype.showWay && item.datatype.showWay === 'button'">
								<view class="enum-button" v-for="subItem in item.datatype.enumList"
									:key="subItem.value">
									<u-button size="mini" :disabled="(shadowUnEnable || item.isReadonly === 1)"
										type="primary" :plain="true" :text="subItem.text" :custom-style="{
																	        backgroundColor: subItem.value === item.shadow ? '#e8f4ff' : '',
																	      }" @click="enumButtonClick(deviceInfo, item, subItem.value)" disabled></u-button>
								</view>
							</view>
							<uni-data-select v-else class="disabled" :clear="false" v-model="item.value"
								:localdata="item.datatype.enumList" @change="dropdownChange(deviceInfo, item, $event)">
							</uni-data-select>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='string'" :label="item.name">
							<u-input v-model="item.value" :placeholder="$tt('status.inputString')" disabled>
							</u-input>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='decimal'" :label="item.name">
							<u-input v-model="item.value" :placeholder="$tt('status.decimals')" disabled>
							</u-input>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='integer'" :label="item.name">
							<u-input v-model="item.value" :placeholder="$tt('status.integer')" disabled>
							</u-input>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='object'">
							<view class="object-wrap">
								<u--text class="object-title" prefixIcon="attach"
									iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
									:text="item.name"></u--text>
								<view class="object-content">
									<u-form labelPosition="left" labelWidth="80"
										:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
										<view v-for="param in item.datatype.params" :key="param.id">
											<u-form-item v-if="param.datatype.type=='bool'" :label="param.name">
												<u-switch v-model="param.value" @change="mqttPublish(deviceInfo, param)"
													inactiveValue="0" activeValue="1" activeColor="#3c9cff"
													inactiveColor="#c4c6c9" size="20" disabled>
												</u-switch>
											</u-form-item>
											<u-form-item v-if="param.datatype.type=='enum'" :label="param.name">
												<view class="enum-button-wrap"
													v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
													<view class="enum-button" v-for="subItem in param.datatype.enumList"
														:key="subItem.value">
														<u-button size="mini"
															:disabled="(shadowUnEnable || param.isReadonly === 1)"
															type="primary" :plain="true" :text="subItem.text"
															@click="enumButtonClick(deviceInfo, param, subItem.value)"
															:custom-style="{
																	        backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',
																	        color: subItem.value === param.shadow ? '#1890ff' : '#000'
																	      }" disabled></u-button>
													</view>
												</view>
												<uni-data-select v-else class="disabled" :clear="false"
													v-model="param.value" :localdata="param.datatype.enumList"
													@change="dropdownChange(deviceInfo, param, $event)">
												</uni-data-select>
											</u-form-item>
											<u-form-item v-if="param.datatype.type=='string'" :label="param.name">
												<u-input v-model="param.value" :placeholder="$tt('status.inputString')"
													disabled>
												</u-input>
											</u-form-item>
											<u-form-item v-if="param.datatype.type=='decimal'" :label="param.name">
												<u-input v-model="param.value" :placeholder="$tt('status.decimals')"
													disabled>
												</u-input>
											</u-form-item>
											<u-form-item v-if="param.datatype.type=='integer'" :label="param.name">
												<u-input v-model="param.value" :placeholder="$tt('status.integer')"
													disabled>
												</u-input>
											</u-form-item>
										</view>
									</u-form>
								</view>
							</view>
						</u-form-item>
						<u-form-item v-if="item.datatype.type=='array'">
							<view class="object-wrap" v-if="item.datatype.arrayType!='object'">
								<u--text class="object-title" prefixIcon="order"
									iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
									:text="item.name"></u--text>
								<view class="object-content">
									<u--form labelPosition="left" labelWidth="80"
										:labelStyle="{ lineHeight: '32px', width: '110px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }">
										<view v-for="(model,index) in item.datatype.arrayModel" :key="model.id">
											<u-form-item v-if="item.datatype.arrayType=='string'"
												:label="item.name+(index+1)">
												<u-input v-model="model.value" :placeholder="$tt('status.inputString')"
													disabled>
												</u-input>
											</u-form-item>
											<u-form-item v-if="item.datatype.arrayType=='decimal'"
												:label="item.name+(index+1)">
												<u-input v-model="model.value" :placeholder="$tt('status.decimals')"
													disabled>
												</u-input>
											</u-form-item>
											<u-form-item v-if="item.datatype.arrayType=='integer'"
												:label="item.name+(index+1)">
												<u-input v-model="model.value" :placeholder="$tt('status.integer')"
													disabled>
												</u-input>
											</u-form-item>
										</view>
									</u--form>
								</view>
							</view>
							<view class="object-wrap" v-if="item.datatype.arrayType=='object'">
								<u--text class="object-title" prefixIcon="order"
									iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
									:text="item.name"></u--text>
								<view style="padding: 0px 4.5px;" class="object-content">
									<u-collapse :border="true">
										<u-collapse-item v-for="(arrayParam,index) in item.datatype.arrayParams"
											:key="index" :title="item.name+(index+1)" :name="item.id+(index+1)">
											<u--form labelPosition="left" labelWidth="80"
												:labelStyle="{marginRight:'16px',lineHeight:'32px',width:'110px',overflow:'hidden',textOverflow:'ellipsis'}">
												<view v-for="param in arrayParam" :key="param.id">
													<u-form-item v-if="param.datatype.type=='bool'" :label="param.name">
														<u-switch v-model="param.value"
															@change="mqttPublish(deviceInfo, param)" inactiveValue="0"
															activeValue="1" activeColor="#3c9cff"
															inactiveColor="#c4c6c9" size="20" disabled>
														</u-switch>
													</u-form-item>
													<u-form-item v-if="param.datatype.type=='enum'" :label="param.name">
														<view class="enum-button-wrap"
															v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
															<view class="enum-button"
																v-for="subItem in param.datatype.enumList"
																:key="subItem.value">
																<u-button size="mini"
																	:disabled="(shadowUnEnable || param.isReadonly === 1)"
																	type="primary" :plain="true" :text="subItem.text"
																	@click="enumButtonClick(deviceInfo, param, subItem.value)"
																	disabled :custom-style="{
																	        backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',
																	        color: subItem.value === param.shadow ? '#1890ff' : '#000'
																	      }"></u-button>
															</view>
														</view>
														<uni-data-select v-else class="disabled" :clear="false"
															v-model="param.value" :localdata="param.datatype.enumList"
															@change="dropdownChange(deviceInfo, param, $event)">
														</uni-data-select>
													</u-form-item>
													<u-form-item v-if="param.datatype.type=='string'"
														:label="param.name">
														<u-input v-model="param.value"
															:placeholder="$tt('status.inputString')" disabled>
														</u-input>
													</u-form-item>
													<u-form-item v-if="param.datatype.type=='decimal'"
														:label="param.name">
														<u-input v-model="param.value"
															:placeholder="$tt('status.decimals')" disabled>
														</u-input>
													</u-form-item>
													<u-form-item v-if="param.datatype.type=='integer'"
														:label="param.name">
														<u-input v-model="param.value"
															:placeholder="$tt('status.integer')" disabled>
														</u-input>
													</u-form-item>
												</view>
											</u--form>
										</u-collapse-item>
									</u-collapse>
								</view>
							</view>
						</u-form-item>
					</view>
					<view class="empty" v-if="deviceInfo.thingsModels.length === 0">
						<u-empty mode="data" :show="deviceInfo.thingsModels.length === 0"
							:text="$tt('scene.emptyData')"></u-empty>
					</view>
				</u--form>
			</view>
		</view>
	</view>
</template>

<script>
	import projectConfig from '@/env.config.js';
	import { getLatestFirmware, relateChannelList, getOrderControl } from '@/apis/modules/device.js';
	import { serviceInvoke } from '@/apis/modules/runtime.js';
	import { getSipStatusInfo, getLocationWayInfo } from '@/helpers/common.js'

	export default {
		name: 'baseStatus',
		props: {
			device: {
				type: Object,
				default: null,
				required: true
			}
		},
		watch: {
			// 兼容小程序
			device: {
				handler(newVal) {
					if (newVal.deviceName !== '') {
						this.deviceInfo = newVal;
						if (this.deviceInfo.deviceType != 3) {
							//分-属性和操作
							this.operateList = this.deviceInfo.thingsModels && this.deviceInfo.thingsModels.filter((
									item) =>
								item.isReadonly == '0');
							this.attributeList = this.deviceInfo.thingsModels && this.deviceInfo.thingsModels.filter((
									item) =>
								item.isReadonly == '1');
							//排序
							this.attributeList = this.attributeList.sort((a, b) => b.order - a.order);
							this.operateList = this.operateList.sort((a, b) => b.order - a.order);
						}
						this.updateDeviceStatus(this.deviceInfo);
						this.initChart();
					}
				},
				deep: true
			}
			//device: function(newVal, oldVal) {


		},
		data() {
			return {
				// 加载图标
				loading: true,
				// 图表数据集合
				monitorChart: [{
					opts: {},
					data: {
						categories: [],
						series: [],
					},
					id: '',
				}],
				// 控制模块标题
				title: this.$tt('status.control'),
				// 未启用设备影子
				shadowUnEnable: false,
				// 控制项标题背景
				statusColor: {
					background: '#67C23A',
					color: '#fff'
				},
				// 模块背景色
				bgStyle: '',
				// 设备信息
				deviceInfo: {
					chartList: [],
				},
				//通道列表
				channelList: [],
				// 设备通道
				channelLoadStatus: 'nomore',
				queryParams: {
					deviceSipId: '', //设备sipid
				},
				//属性列表
				attributeList: [],
				//动作列表
				operateList: [],
			};
		},
		created() {
			// 获取设备状态(兼容H5和APP)
			if (this.device !== null && Object.keys(this.device).length !== 0) {

				this.deviceInfo = this.device;

				if (this.deviceInfo.deviceType != 3) {
					//分-属性和操作
					this.operateList = this.deviceInfo.thingsModels && this.deviceInfo.thingsModels.filter((
							item) =>
						item.isReadonly == '0');
					this.attributeList = this.deviceInfo.thingsModels && this.deviceInfo.thingsModels.filter((
							item) =>
						item.isReadonly == '1');
					//排序
					this.attributeList = this.attributeList.sort((a, b) => b.order - a.order);
					this.operateList = this.operateList.sort((a, b) => b.order - a.order);
					this.deviceInfo.thingsModels = this.deviceInfo.thingsModels.sort((a, b) => b.order - a.order);
					this.deviceInfo.chartList = this.deviceInfo.chartList.sort((a, b) => b.order - a.order);
				}
				this.updateDeviceStatus(this.deviceInfo);
				this.initChart();
			};
			// 回调处理
			this.mqttCallback();
		},
		methods: {
			/* Mqtt回调处理 */
			mqttCallback() {
				this.$mqttTool.client.on('message', (topic, message, buffer) => {
					let topics = topic.split('/');
					let productId = topics[1];
					let deviceNum = topics[2];
					message = JSON.parse(message.toString());
					if (topics[3] == 'status') {
						console.log('接收到【设备状态-运行】主题：', topic);
						console.log('接收到【设备状态-运行】内容：', message);
						// 更新列表中设备的状态
						if (this.deviceInfo.serialNumber == deviceNum) {
							this.deviceInfo.status = message.status;
							this.deviceInfo.isShadow = message.isShadow;
							this.deviceInfo.rssi = message.rssi;
							this.updateDeviceStatus(this.deviceInfo);
						}
					}
					//兼容设备回复
					if (topics[4] == 'reply') {
						uni.showToast({
							icon: 'none',
							title: message,
						})
					}
					if (topics[3] == 'property' || topics[3] == 'function' || topic.endsWith(
							'ws/service')) {
						console.log('接收到【物模型】主题：', topic);
						console.log('接收到【物模型】内容：', message);
						// 更新列表中设备的属性
						if (this.deviceInfo.serialNumber == deviceNum && message.message) {
							for (let j = 0; j < message.message.length; j++) {
								let isComplete = false;
								// 设备状态
								for (let k = 0; k < this.deviceInfo.thingsModels.length && !
									isComplete; k++) {
									if (this.deviceInfo.thingsModels[k].id == message.message[j].id) {
										// 普通类型
										this.deviceInfo.thingsModels[k].shadow = message.message[j].value;
										isComplete = true;
										break;
									} else if (this.deviceInfo.thingsModels[k].datatype.type ==
										"object") {
										// 对象类型
										for (let n = 0; n < this.deviceInfo.thingsModels[k]
											.datatype.params
											.length; n++) {
											if (this.deviceInfo.thingsModels[k].datatype.params[n]
												.id == message.message[j]
												.id) {
												this.deviceInfo.thingsModels[k].datatype.params[n]
													.shadow =
													message.message[j].value;
												isComplete = true;
												break;
											}
										}
									} else if (this.deviceInfo.thingsModels[k].datatype.type ==
										"array") {
										// 数组类型
										if (this.deviceInfo.thingsModels[k].datatype.arrayType ==
											"object") {
											// 1.对象类型数组,id为数组中一个元素,例如：array_01_gateway_temperature
											if (String(message.message[j].id).indexOf("array_") == 0) {
												for (let n = 0; n < this.deviceInfo.thingsModels[k]
													.datatype
													.arrayParams.length; n++) {
													for (let m = 0; m < this.deviceInfo
														.thingsModels[k].datatype
														.arrayParams[n].length; m++) {
														if (this.deviceInfo.thingsModels[k]
															.datatype.arrayParams[n]
															[m].id == message.message[j].id) {
															this.deviceInfo.thingsModels[k]
																.datatype.arrayParams[n]
																[m].shadow = message.message[j].value;
															isComplete = true;
															break;
														}
													}
													if (isComplete) {
														break;
													}
												}
											} else {
												// 2.对象类型数组，例如：gateway_temperature,消息ID添加前缀后匹配
												for (let n = 0; n < this.deviceInfo.thingsModels[k]
													.datatype
													.arrayParams.length; n++) {
													for (let m = 0; m < this.deviceInfo
														.thingsModels[k].datatype
														.arrayParams[n].length; m++) {
														let index = n > 9 ? String(n) : '0' + k;
														let prefix = 'array_' + index + '_';
														if (this.deviceInfo.thingsModels[k]
															.datatype.arrayParams[n]
															[m].id == prefix + message.message[j].id) {
															this.deviceInfo.thingsModels[k]
																.datatype.arrayParams[n]
																[m].shadow = message.message[j].value;
															isComplete = true;
														}
													}
													if (isComplete) {
														break;
													}
												}
											}
										} else {
											// 整数、小数和字符串类型数组
											for (let n = 0; n < this.deviceInfo.thingsModels[k]
												.datatype.arrayModel
												.length; n++) {
												if (this.deviceInfo.thingsModels[k].datatype
													.arrayModel[n].id ==
													message.message[j].id) {
													this.deviceInfo.thingsModels[k].datatype
														.arrayModel[n].shadow =
														message.message[j].value;
													isComplete = true;
													break;
												}
											}
										}
									}
								};
								// 监测数据
								for (let k = 0; k < this.deviceInfo.chartList.length && !
									isComplete; k++) {
									if (this.deviceInfo.chartList[k].id.indexOf("array_") == 0) {
										// 数组类型匹配,例如：array_00_gateway_temperature
										if (this.deviceInfo.chartList[k].id == message.message[j].id) {
											// let shadows = message[j].value.split(",");
											this.deviceInfo.chartList[k].shadow = message.message[j].value;
											// 更新图表
											for (let m = 0; m < this.monitorChart.length; m++) {
												if (this.deviceInfo.chartList[k].id == this
													.monitorChart[m].id) {
													// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
													let value = (Number(message.message[j].value) + Math
														.abs(this
															.deviceInfo.chartList[k].datatype
															.min)) / (Math.abs(
															this.deviceInfo.chartList[k]
															.datatype.min) + Math
														.abs(this.deviceInfo.chartList[k]
															.datatype.max));
													this.monitorChart[m].data.series[0].data =
														value;
													this.monitorChart[m].opts.title.name = message.message[
															j].value + ' ' +
														this.deviceInfo.chartList[k].datatype.unit;
													break;
												}
											}
											isComplete = true;
											break;
										}
									} else {
										// 普通类型匹配
										if (this.deviceInfo.chartList[k].id == message.message[j].id) {
											this.deviceInfo.chartList[k].shadow = message.message[j].value;
											// 更新图表
											for (let m = 0; m < this.monitorChart.length; m++) {
												if (this.deviceInfo.chartList[k].id == this
													.monitorChart[m].id) {
													// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
													let value = (Number(message.message[j].value) + Math
														.abs(this
															.deviceInfo.chartList[k].datatype
															.min)) / (Math.abs(
															this.deviceInfo.chartList[k]
															.datatype.min) + Math
														.abs(this.deviceInfo.chartList[k]
															.datatype.max));
													this.monitorChart[m].data.series[0].data =
														value;
													this.monitorChart[m].opts.title.name = message.message[
															j].value + ' ' +
														this.deviceInfo.chartList[k].datatype.unit;
													break;
												}
											}
											isComplete = true;
											break;
										}
									}
									if (isComplete) {
										break;
									}
								};
							}
						}
					}
				});
			},
			//发送指令
			async mqttPublish(device, model) {
				const command = {};
				command[model.id] = model.shadow;
				const params = {
					deviceId: device.deviceId,
					modelId: model.modelId
				}
				//判断是否有权限
				const response = await getOrderControl(params);
				if (response.code != 200) {
					uni.$u.toast(response.msg);
					return;
				}
				const data = {
					serialNumber: device.serialNumber,
					productId: device.productId,
					remoteCommand: command,
					identifier: model.id,
					modelName: model.name,
					isShadow: device.status != 3,
					type: model.type,
				}
				serviceInvoke(data).then(response => {
					if (response.code === 200) {
						uni.showToast({
							icon: 'none',
							title: this.$tt('status.serviceCallSucc')
						});
					}
				})
			},
			// 获取下载路径前缀
			getDownloadUrl(path) {
				return projectConfig.BASE_URL + path;
			},
			/** 更新设备状态 */
			updateDeviceStatus(device) {
				if (device.status === 3) {
					this.title = this.$tt('status.online');
					this.bgStyle =
						'background-color:#5ac725;border-top-left-radius:6px;border-top-right-radius:6px;';
					this.shadowUnEnable = false;
				} else {
					if (device.isShadow === 1) {
						this.bgStyle =
							'background-color:#3c9cff;border-top-left-radius:6px;border-top-right-radius:6px;';
						this.title = this.$tt('status.shadow');
						this.shadowUnEnable = false;
					} else {
						this.bgStyle =
							'background-color:#909399;border-top-left-radius:6px;border-top-right-radius:6px;';
						this.title = this.$tt('status.deviceOffline');
						this.shadowUnEnable = true;
					}
				}
			},
			/** 下拉菜单改变事件*/
			dropdownChange(device, model, eventData) {
				model.shadow = eventData;
				// 防止uni-data-select在初始化的时候也触发change，产生不必要的错误
				if (eventData !== "") {
					// 发布物模型
					this.mqttPublish(device, model);
				}
			},
			/**监测图表*/
			initChart() {
				this.monitorChart = [];
				let list = [];
				if (this.deviceInfo.chartList && this.deviceInfo.chartList.length !== 0) {
					for (let i = 0; i < this.deviceInfo.chartList.length; i++) {
						let data = {};
						let res = {
							categories: [{
								value: 0.2,
								color: '#409EFF'
							}, {
								value: 0.8,
								color: '#12d09f'
							}, {
								value: 1,
								color: '#F56C6C'
							}],
							series: [{
								name: this.deviceInfo.chartList[i].name,
								// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
								data: (Number(this.deviceInfo.chartList[i].shadow) + Math.abs(
										this.deviceInfo
										.chartList[i].datatype.min)) /
									(Math.abs(this.deviceInfo.chartList[i].datatype.min) + Math
										.abs(this
											.deviceInfo
											.chartList[i].datatype.max))
							}]
						};
						data = JSON.parse(JSON.stringify(res));
						//这里的 opts 是图表类型 type="gauge" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['gauge'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
						// #ifdef MP-WEIXIN
						const gaugeWidth = 30;
						const pointerWidth = 30;
						// #endif
						// #ifndef MP-WEIXIN
						const gaugeWidth = 10;
						const pointerWidth = 10;
						// #endif
						const opts = {
							update: true,
							timing: 'easeOut',
							duration: 1000,
							rotate: false,
							rotateLock: false,
							color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272',
								'#FC8452',
								'#9A60B4',
								'#ea7ccc'
							],
							padding: undefined,
							fontSize: 13,
							fontColor: '#666666',
							dataLabel: true,
							dataPointShape: true,
							dataPointShapeType: 'solid',
							touchMoveLimit: 60,
							enableScroll: false,
							enableMarkLine: false,
							title: {
								name: `${!this.deviceInfo.chartList[i].shadow || this.deviceInfo.chartList[i].shadow == ' ' ? 0 : this.deviceInfo.chartList[i].shadow} ${this.deviceInfo.chartList[i].datatype.unit}`,
								fontSize: 24,
								color: '#2fc25b',
								offsetY: 95,
								offsetX: 0
							},
							subtitle: {
								name: this.deviceInfo.chartList[i].name,
								fontSize: 14,
								color: '#333',
								offsetY: 10,
								offsetX: 0
							},
							extra: {
								gauge: {
									type: 'default',
									width: gaugeWidth,
									labelColor: '#666666',
									startAngle: 0.75,
									endAngle: 0.25,
									startNumber: this.deviceInfo.chartList[i].datatype.min,
									endNumber: this.deviceInfo.chartList[i].datatype.max,
									format: 'dashboardKeepTwoDecimals',
									labelFormat: '',
									splitLine: {
										fixRadius: 0,
										splitNumber: 10,
										width: 30,
										color: '#FFFFFF',
										childNumber: 5,
										childWidth: 10
									},
									pointer: {
										width: pointerWidth,
										color: 'auto'
									},
									labelOffset: 16
								}
							}
						};
						list.push({
							opts: opts,
							data: data,
							id: this.deviceInfo.chartList[i].id
						});
					}
				};
				this.monitorChart = [...list];
				this.loading = false;
			},
			// 下拉刷新
			deviceStatusRefresh() {
				this.updateDeviceStatus(this.deviceInfo);
				this.monitorChart = [];
				this.initChart();
				uni.stopPullDownRefresh();
			},
			/** 枚举类型按钮单击 */
			enumButtonClick(device, model, value) {
				model.shadow = value;
				this.mqttPublish(device, model);
			},
			getKey(id, index) {
				if (index || index === 0) {
					return `${id}-${index}`;
				} else {
					return id;
				}
			},
			//查看版本
			viewVersion() {
				uni.$u.route('/pagesA/home/device/status/version', {
					firmwareType: 1,
					versionInput: '',
					firmwareVersion: this.device.firmwareVersion,
					wirelessVersion: this.device.wirelessVersion,
					status: this.device.status,
					deviceId: this.device.deviceId
				});
			},

		}
	};
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
	}

	.wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	.wrapper .item {
		width: 100%;
		height: 250px;
		text-align: center;
		// border-top: 1px solid #efefef;
	}

	.wrapper .item .dashboard {
		width: 60%;
		margin: auto;
	}

	.card {
		box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		background-color: #fff;
		padding: 24rpx;

		&:not(:last-child) {
			margin-bottom: 20rpx;
		}

		.title-wrap {
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.form-wrap {
			margin-top: 20rpx;
		}

		.version-wrap {
			background-color: #F7F7F7;
			border-radius: 5px;
			padding: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				line-height: 32px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #303133;
				font-size: 15px;
			}
		}

		.empty {
			margin: 40rpx;
		}
	}

	.disabled {
		pointer-events: none;
		cursor: default;
		background-color: rgb(245, 247, 250);
	}

	.object-wrap {
		width: 100%;

		.object-title {}

		.object-content {
			// border: 1px #f1f3f4 solid;
			padding: 0px 18px;
			border-radius: 5px;

			::v-deep .u-line:first-child {
				border-bottom: transparent !important;
			}
		}
	}

	.enum-button-wrap {
		.enum-button {
			display: inline-block;
			margin-right: 10px;

			&:not(:first-child) {
				margin-top: 10px
			}
		}
	}

	.channel_wrap {
		padding: 6px 0;

		.item_body {
			position: relative;
			display: flex;
			align-items: center;
			margin-bottom: 6px;
			background: #fff;

			.img {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 5px;
				width: 90px;
				height: 60px;
				background: #e5e5e5;
				margin: 10px;
			}

			.status {
				position: absolute;
				right: 13px;
				top: 13px;
			}
		}
	}
</style>